<template>
    <div class="paginationBox">
        <el-pagination
            small
            :current-page="currentPage"
            :page-size="props.pageSize"
            :background="props.background"
            :layout="props.layout"
            :total="totalNum"
            :hide-on-single-page="props.hideonsinglepage"
            @current-change="handleCurrentChange"
        />
    </div>
</template>
<script lang="ts" setup>
import { ref, watch, computed } from "vue";
interface Props {
    background?: boolean;
    pageSize?: number | string | Array<[number]>;
    totalNum?: number | string;
    currentpage?: number | string;
    layout?: string;
    hideonsinglepage?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
    background: true,
    hideonsinglepage: false,
    layout: "total, prev, pager, next, jumper", // jumper  total
    pageSize: 10,
    totalNum: 0,
    currentpage: 1,
});
const currentPage = ref(props.currentpage);
const emit = defineEmits(["paginaClick"]);
const handleCurrentChange = (v: number) => {
    currentPage.value = v;
    emit("paginaClick", v);
};
const totalNum = computed((e: any) => {
    return props.totalNum;
});
watch(
    totalNum,
    (n, o) => {
        currentPage.value = 1;
    },
    { immediate: true, deep: true }
);
</script>
<style lang="scss" scoped>
.paginationBox {
    margin-top: 20px;
    padding: 0 20px;
    display: flex;
    justify-content: flex-end;
}
</style>
